<template>
  <view class="page">
    <view class="box">
      <view class="li flex-between align-center" v-if="user.phone">
        <text class="key">手机号</text>
        <text class="value">{{ user.phone }}</text>
      </view>
      <view class="li flex-between align-center" v-else @click="show20 = true">
        <text class="key">绑定手机号</text>
        <image
          src="../../static/more.png"
          style="width: 40rpx; height: 40rpx"
        ></image>
      </view>
      <view class="li flex-between align-center">
        <text class="key"> 版本号 </text>
        <text>V1.2.11</text>
       </view>
      <!-- <view class="li flex-between align-center">
				<text class="key">隐私政策</text>
				<image src="../../static/more.png" style="width: 40rpx; height: 40rpx;"></image>
			</view> -->
    </view>
    <view class="botVue">
      <view class="btn margin0" @click="show = true">退出登录</view>
    </view>

    <u-popup v-model="show20" mode="center" border-radius="12">
      <view class="popVue">
        <view class="title text-center">绑定手机号</view>
        <view class="inpVue">
          <view class="label">手机号</view>
          <view class="flex">
            <input type="number" v-model="name" placeholder="请输入手机号" />
          </view>
        </view>
        <view class="inpVue margin50">
          <view class="label">验证码</view>
          <view class="flex align-center">
            <input type="number" v-model="code" placeholder="请输入验证码" />
            <view class="code" @click="sendCode()">{{ text }}</view>
          </view>
        </view>
        <view class="loginBtn margin40" @click="bandFun()">确认</view>
      </view>
    </u-popup>

    <!-- 退出登录 -->
    <u-modal
      v-model="show"
      content="确认退出登录？"
      confirm-color="#F7C878"
      :show-cancel-button="true"
      @confirm="logoutFun"
    ></u-modal>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      show: false,
      show20: false,
      code: "",
      text: "获取验证码",
      isSend: false,
      name: "",
    };
  },
  computed: {
    ...mapState({
      user: (state) => state.user,
    }),
  },
  methods: {
    async bandFun() {
      if (!this.$u.test.mobile(this.name))
        return this.$u.toast("请输入正确手机号");
      if (!this.code) return this.$u.toast("请输入验证码");
      const res = await this.$request("/aiet-user-center/user/bindPhone", {
        phone: this.name,
        code: this.code,
      });
      if (res.code === 200) {
        this.show20 = false;
        this.name = "";
        this.code = "";
        this.$u.toast("绑定成功");
        uni.setStorageSync("ai-token", res.data.token);
        this.$store.state.isLogin = true;
        this.$store.state.user = res.data.user;
      } else {
        this.$u.toast(res.msg);
      }
    },

    // 退出登录
    async logoutFun() {
      uni.showLoading();
      const res = await this.$request("/aiet-user-center/user/logout");
      if (res.code === 200) {
        uni.hideLoading();
        this.$u.toast("退出成功");
        uni.removeStorageSync("ai-token");
        this.$store.state.isLogin = false;
        this.$store.state.user = {};
        setTimeout(() => {
          uni.switchTab({
            url: "../index/index",
          });
        }, 1000);
      } else {
        uni.hideLoading();
        this.$u.toast(res.msg);
      }
    },

    // 发送验证码
    async sendCode() {
      if (!this.$u.test.mobile(this.name))
        return this.$u.toast("请输入正确手机号");
      if (this.isSend) return;
      this.isSend = true;
      uni.showLoading();
      try {
        const res = await this.$request("/aiet-user-center/user/sendCode", {
          phone: this.name,
        });
        if (res.code === 200) {
          uni.hideLoading();
          this.$u.toast("发送成功");
          let count = 60;
          this.text = `${count}s`;
          let timer = setInterval(() => {
            count--;
            this.text = `${count}s`;
            if (count === 0) {
              clearInterval(timer);
              this.text = "获取验证码";
              this.isSend = false;
            }
          }, 1000);
        } else {
          uni.hideLoading();
          this.$u.toast(res.msg);
          this.isSend = false;
        }
      } catch (error) {
        uni.hideLoading();
        console.log("调用接口失败", error);
        this.$u.toast(error.msg);
        this.isSend = false;
      } finally {
        uni.hideLoading();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.popVue {
  width: 690rpx;
  padding: 30rpx;
  .title {
    font-weight: 600;
    color: #000;
  }
  .loginBtn {
    width: 100%;
    height: 88rpx;
    background: #f7c878;
    border-radius: 44rpx;
    color: #fff;
    line-height: 88rpx;
    text-align: center;
    font-size: 30rpx;
  }
  .inpVue {
    width: 100%;
    .label {
      color: #808080;
    }
    input {
      flex: 1;
      height: 88rpx;
      border-radius: 12rpx;
      border: 1rpx solid #ececec;
      padding-left: 30rpx;
      display: block;
      margin-top: 15rpx;
      color: #000;
    }
    .code {
      width: 200rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      margin-top: 15rpx;
      margin-left: 20rpx;
      border-radius: 12rpx;
      background: #f5f5f5;
      color: #fff;
      background: #f8c329;
    }
  }
}
.box {
  width: 100%;
  background: #fff;
  .li {
    width: 100%;
    height: 120rpx;
    border-bottom: 1rpx solid #f5f5f5;
    padding: 0 30rpx;
    .key {
      color: #000;
      font-weight: 600;
    }
    .value {
      color: #a3acad;
    }
  }
}
.botVue {
  width: 750rpx;
  position: fixed;
  left: 0;
  bottom: 80rpx;
  text {
    color: #888;
    line-height: 1;
  }
  .btn {
    width: 690rpx;
    height: 88rpx;
    background: rgba(248, 195, 41, 1);
    border-radius: 12rpx;
    line-height: 88rpx;
    text-align: center;
    color: #fff;
  }
}
</style>
